<template>
   <RouterLink :to="`/product/${goods.id}`" class='goods-item'>
        <img :src="goods.picture" alt="">
        <p class="name ellipsis">{{goods.name}}</p>
        <p class="desc ellipsis">{{goods.tag}}</p>
        <p class="price">&yen;{{goods.price}}</p>
    </RouterLink>
</template>

<script>
export default {
  name:'GoodsItem',
  props:{
    goods:{
    type: Object,
        default: () => {}
    }
  }
}
</script>

<style lang='less' scoped>
@import '~@/assets/styles/mixins.less';
@import '~@/assets/styles/variables.less';
 .goods-item{
        width: 220px;
        display: block;
        padding: 20px 30px;
        text-align: center;
         .hoverShadow();
        img{
          height: 160px;
          width: 160px;
        }
        p {
          padding-top: 10px;
        }
        .name {
          font-size: 16px;
        }
        .desc {
          color: #999;
          height: 29px;
        }
        .price {
          color: @priceColor;
          font-size: 20px;
        }
      }
</style>